<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb>
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>项目管理</el-breadcrumb-item>
			<el-breadcrumb-item>项目列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card>
			<el-row :gutter="600"><!-- 间隙 -->
				<!-- 搜索区域 -->
				<el-col :span="12"><!-- 列宽 -->
					<el-input placeholder="请输入搜索内容">
						<el-button slot="append" icon="el-icon-search"></el-button>
					</el-input>
				</el-col>
				<el-col :span="4">
					<!-- 添加按钮 -->
					<el-button type="primary" @click="goAddsPage">添加项目</el-button>
				</el-col>
			</el-row>
			<el-table :data="projectList" style="width: 100%">

				<el-table-column type="expand">
					<template slot-scope="props">
						<el-form label-position="left" inline class="demo-table-expand">
							<!-- <el-form-item label="项目名称">
								<span>{{ props.row.project_name }}</span>
							</el-form-item>
							<el-form-item label="项目状态" >
								<span>{{ props.row.project_status }}</span>
							</el-form-item>
							<el-form-item label="开始日期">
								<span>{{ props.row.plan_start_time }}</span>
							</el-form-item>
							<el-form-item label="结束日期">
								<span>{{ props.row.plan_end_time }}</span>
							</el-form-item>
							<el-form-item label="投资金额">
								<span>{{ props.row.project_cost }}</span>
							</el-form-item>
							<el-form-item label="项目经理">
								<span>{{ props.row.project_manager }}</span>
							</el-form-item> -->
							<el-form-item label="项目描述:">
								<span>{{ props.row.disc }}</span>
							</el-form-item>
						</el-form>
					</template>
				
				</el-table-column>
				<el-table-column label="项目名称" prop="project_name">
				</el-table-column>
				<el-table-column label="项目状态" prop="project_status">
				</el-table-column>
				<el-table-column label="开始日期" prop="plan_start_time">
				</el-table-column>
				<el-table-column label="预期结束日期" prop="plan_end_time">
				</el-table-column>
				<el-table-column label="投资金额" prop="project_cost">
				</el-table-column>
				<el-table-column label="项目经理" prop="project_manager">
				</el-table-column>
				
				<el-table-column label="操作" width="300">
				      <template slot-scope="scope">
						 <el-row :gutter="20">
						<el-button
						  size="mini"
						  type="primary"
						  @click="goNature(scope.row.id)">风险属性</el-button>
				        <el-button
				          size="mini"
				          type="warning"
				          @click="goRisk(scope.row.id)">风险识别</el-button>
						  </el-row>
				      </template>
					  </el-table-column>
			</el-table>
		</el-card>
	</div>
</template>

<script>
	export default {
		created() {
			this.getProjectList();
		},

		data() {
			return {
				//查询信息实体
				queryInfo: {
					query: "", //查询信息
					pageNum: 1, //当前页
					pageSize: 5, //每页最大数
				},
				queryInfo1: {
					//和后端QueryInfo实体的属性一致
					id: JSON.parse(window.sessionStorage.getItem('user')).id,
					pageNum: 1,
					pageSize: 5,
				},

				projectList: [], //项目列表
				total: 0, //总记录数
				search: '',
			}
		},

		methods: {
			//获取所有项目
			async getProjectList() {
				const {
					data: resString
				} = await this.$http.get("project", {
					params: this.queryInfo1
				});
				this.projectList = resString.projectList;
			},
			goRisk(id){
				window.sessionStorage.setItem("Id", id)
				this.$router.push('/risk_disc')
			},
			async goNature(id){
				window.sessionStorage.setItem("Id", id)
				this.$router.push('/risk_gaitu')
			},
			goAddsPage(){
				this.$router.push('/project_add')
				}
		    }
	}
</script>

<style lang="less" scoped>
	.box {
		margin-bottom: 10px;

	}

	.el-breadcrumb {
		margin-left: 5px;
		margin-top: 5px;
		margin-bottom: 5px;
		font-size: 17px;
		font-weight: 700;
	}

	.el-card {
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
		margin: 10px;
	}
</style>
